<template>
    <div class="group">
        <div>axios.request 和 封装service 获取资源的请求</div>
        <button type="button" @click="requestGetRolesPageHandler">get 显示角色分页列表</button>
        <button type="button" @click="requestPostRolesHandler">post 添加角色</button>
        <button type="button" @click="requestPutRolesByRoleIdHandler">put 修改角色</button>
        <button type="button" @click="requestDeleteRolesByIdsHandler">delete 删除角色</button>
        <button type="button" @click="requestPatchRolesByRoleIdUpdateStatusHandler">patch 修改角色状态</button>

        <ul>
            <li v-for="item in roles" :key="item.id">{{ item.id }}-{{ item.name }}-{{ item.code }}-{{ item.status }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
    requestGetRolesPage,
    requestPostRoles,
    requestPutRolesByRoleId,
    requestDeleteRolesByIds,
    requestPatchRolesByRoleIdUpdateStatus
} from '@/service/study5/demo2'

import { type RolesType } from '@/service/types/type52'


const roles = ref<RolesType[]>([])

// get 查看角色分页列表
const requestGetRolesPageHandler = async () => {
    const res = await requestGetRolesPage({ pageNum: 1, pageSize: 50 })
    console.log(res.data.list);
    roles.value = res.data.list

}

// post 添加角色
const requestPostRolesHandler = async () => {
    const newRole = {
        id: 2,
        name: 'lq',
        code: '2',
        sort: 2,
        status: 1,
        dataScope: 3
    }
    const res = await requestPostRoles(newRole)
    console.log(res.data);

}

// put 通过角色的id修改角色信息
const requestPutRolesByRoleIdHandler = async () => {
    const res = await requestPutRolesByRoleId(2, {
        name: 'lwj-lwj',
        code: '2',
        sort: 2,
        status: 1,
    })
    console.log(res.data);

}

// delete 删除角色
const requestDeleteRolesByIdsHandler = async () => {
    const res = await requestDeleteRolesByIds('2')
    console.log(res.data);

}

// 修改角色状态
const requestPatchRolesByRoleIdUpdateStatusHandler = async () => {
    const res = await requestPatchRolesByRoleIdUpdateStatus('2', 0)
    console.log(res.data);
}



</script>

<style lang="scss" scoped>
.group {
    margin: 20px;
    padding: 10px;
    border: 3px solid skyblue;
}
</style>